<template>
  <div>
    <!-- layout响应式布局 -->
    <el-row>
      <el-col :span="6">
        <!-- 第一个card -->
        <Detail title="总销售额" number="￥126560">
          <!-- 具名插槽 -->
          <template v-slot:charts>
            <span style="margin-right:7px;line-height:60px">
              周同比&nbsp;&nbsp;21.66%
              <svg
                t="1645261511067"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1640"
                width="15"
                height="15"
              >
                <path
                  d="M502.345143 378.953143l-256.731429 254.098286a14.628571 14.628571 0 0 0 10.386286 25.014857h513.316571a14.628571 14.628571 0 0 0 10.24-25.014857L522.971429 378.953143a14.628571 14.628571 0 0 0-20.626286 0z"
                  fill="#d81e06"
                  p-id="1641"
                />
              </svg>
            </span>
            <span>
              日同比&nbsp;&nbsp;10.34%
              <svg
                t="1645261835562"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2064"
                width="15"
                height="15"
              >
                <path
                  d="M522.971429 647.899429l256.658285-254.098286a14.628571 14.628571 0 0 0-10.24-25.014857h-513.462857a14.628571 14.628571 0 0 0-10.24 25.014857l256.731429 254.098286a14.628571 14.628571 0 0 0 20.48 0z"
                  fill="#1afa29"
                  p-id="2065"
                />
              </svg>
            </span>
          </template>
          <template v-slot:footer>
            <span style="margin-right:10px">日销售额</span>
            <span>￥12452</span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="访问量" number="8840">
          <template v-slot:charts>
            <lineCharts />
          </template>
          <template v-slot:footer>
            <span style="margin-right:10px">日访问量</span>
            <span>203</span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="支付笔数" number="322">
          <template v-slot:charts>
            <barCharts />
          </template>
          <template v-slot:footer>
            <span style="margin-right:10px">转化率</span>
            <span>65%</span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="运营活动效果" number="78%">
          <template v-slot:charts>
            <progressCharts />
          </template>
          <template v-slot:footer>
            <span style="margin-right:7px">
              周同比&nbsp;&nbsp;21.66%
              <svg
                t="1645261511067"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1640"
                width="15"
                height="15"
              >
                <path
                  d="M502.345143 378.953143l-256.731429 254.098286a14.628571 14.628571 0 0 0 10.386286 25.014857h513.316571a14.628571 14.628571 0 0 0 10.24-25.014857L522.971429 378.953143a14.628571 14.628571 0 0 0-20.626286 0z"
                  fill="#d81e06"
                  p-id="1641"
                />
              </svg>
            </span>
            <span>
              日同比&nbsp;&nbsp;10.34%
              <svg
                t="1645261835562"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2064"
                width="15"
                height="15"
              >
                <path
                  d="M522.971429 647.899429l256.658285-254.098286a14.628571 14.628571 0 0 0-10.24-25.014857h-513.462857a14.628571 14.628571 0 0 0-10.24 25.014857l256.731429 254.098286a14.628571 14.628571 0 0 0 20.48 0z"
                  fill="#1afa29"
                  p-id="2065"
                />
              </svg>
            </span>
          </template>
        </Detail>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
// 折线图
import lineCharts from './lineChart'
// 柱状图
import barCharts from './barChart'
// 进度条
import progressCharts from './progressChart'

export default {
  name: 'Card',
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts
  }
}
</script>

<style>
</style>
